<template>
  <div>
    <el-table :data="tableData" style="width: 100%" v-bind="config">
      <!-- 序号 -->
      <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" />
          <WColumn v-for="(item,key) in tableColumn" :key="key" :column="item" >
              <template  v-for="slot in Object.keys($scopedSlots) " #[slot]="scope">
                <slot :name="slot" v-bind="scope"></slot>
              </template>
          </WColumn>
    </el-table>
  </div>
</template>
<script>
import WColumn from "./WColumn.vue";
export default {
  components: { WColumn },
  props: {
    // 是否展示序号
    showIndex: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableColumn: {
      type: Array,
      default: () => {
        return [];
      }
    }

  },
  data() {
    return {

    };

  },
  computed: {
    config() {
      const defaultConfig = {
        "header-cell-style": {
          textAlign: "center",
          backgroundColor: "#B1C8F9",
          border: "1px solid #ccc",
          fontSize: "16px",
          color: "#333"
        }
      };
      return Object.assign(defaultConfig, this.$attrs);
    }
  }
};
</script>
